<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-form :form="form" :labelCol="{ span: 4 }" labelAlign="left">
      <a-form-item label="类别名称：" :wrapperCol="{ span: 18 }" required>
        <a-input
          placeholder="请输入类别名称"
          :value="form.categoryName"
          @change="handleChange('categoryName', $event)"
        />
      </a-form-item>
      <a-form-item label="描述" :wrapperCol="{ span: 18 }" required>
        <a-textarea
          rows="4"
          placeholder="请输入描述"
          :value="form.categoryDec"
          @change="handleChange('categoryDec', $event)"
        />
      </a-form-item>
      <a-form-item label="图片" :wrapperCol="{ span: 18 }" required>
        <a-input
          placeholder="类别图片"
          :value="form.categoryPic"
          @change="handleChange('categoryPic', $event)"
        />
        <img
          :src="form.categoryPic"
          width="100px"
          height="100px"
          class="rounded_8"
          alt="类别图"
        />
      </a-form-item>
      <!-- <a-form-item label="图片" :wrapperCol="{ span: 18 }" required>
        <input type="file" accept="image/*" @input="fileInput" />
      </a-form-item> -->
    </a-form>
  </a-card>
</template>

<script>
export default {
  name: "CategoryForm",
  emit: ["setCategoryForm"],
  props: ["form"],
  data() {
    return {};
  },
  methods: {
    handleChange(type, { target }) {
      this.$emit("setCategoryForm", {
        value: target.value,
        type,
      });
    },
    fileInput(e) {
      console.log(e, "fileInput");
    },
    handleChanges() {
      console.log(" handleChange");
    },
  },
};
</script>

<style scoped>
.rounded_8 {
  border-radius: 8px;
}
</style>
